<template>
  <div v-show="open" ref="dial-plate" class="dial-plate">
    <!-- 普通拨号盘 -->
    <table class="dial-table" ref="dial-table" cellspacing="15px">
      <tr valign="middle">
        <td colspan="4">
          <el-input ref="phoneNumber" v-model="phoneNumber" readonly></el-input>
        </td>
      </tr>
      <tr align="center" valign="middle">
        <td>
          <el-button type="info" @click="clickNumber('1')">1</el-button>
        </td>
        <td>
          <el-button type="info" @click="clickNumber('2')">2</el-button>
        </td>
        <td>
          <el-button type="info" @click="clickNumber('3')">3</el-button>
        </td>
        <td>
          <el-button
            type="info"
            style="font-size:22px"
            @click="handleCall('trans')"
          >{{$t('m.CALL_TRANSFER')}}</el-button>
        </td>
      </tr>
      <tr align="center" valign="middle">
        <td>
          <el-button type="info" @click="clickNumber('4')">4</el-button>
        </td>
        <td>
          <el-button type="info" @click="clickNumber('5')">5</el-button>
        </td>
        <td>
          <el-button type="info" @click="clickNumber('6')">6</el-button>
        </td>
        <td>
          <el-button
            type="info"
            style="font-size:22px"
            @click="handleCall('consult')"
          >{{$t('m.CONSULTATION_CALL')}}</el-button>
        </td>
      </tr>
      <tr align="center" valign="middle">
        <td>
          <el-button type="info" @click="clickNumber('7')">7</el-button>
        </td>
        <td>
          <el-button type="info" @click="clickNumber('8')">8</el-button>
        </td>
        <td>
          <el-button type="info" @click="clickNumber('9')">9</el-button>
        </td>
        <td>
          <el-button
            type="info"
            style="font-size:22px"
            @click="handleCall('meeting')"
          >{{$t('m.JOIN_THE_MEETING')}}</el-button>
        </td>
      </tr>
      <tr align="center" valign="middle">
        <td>
          <el-button type="info" @click="clickNumber('*')">*</el-button>
        </td>
        <td>
          <el-button type="info" @click="clickNumber('0')">0</el-button>
        </td>
        <td>
          <el-button type="info" @click="clickNumber('#')">#</el-button>
        </td>
        <td rowspan="3">
          <el-button
            type="info"
            style="font-size:25px"
            @click="handleCall('audio')"
          >{{$t('m.VOICE_CALL')}}</el-button>
        </td>
      </tr>
      <tr align="center" valign="middle">
        <td>
          <el-button type="info" @click="clickDelete('C')">C</el-button>
        </td>
        <td>
          <el-button type="info" @click="clickDelete('←')">←</el-button>
        </td>
        <td>
          <el-button type="info" @click="clickNumber('-')">-</el-button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'keyboard',
  props: {
    open: Boolean,
    currentTalkObj: Object,
  },
  computed: mapState({
    operatorInfo: (state) => state.cache.operatorInfo,
  }),
  data() {
    return {
      phoneNumber: '',
      number: '',
    }
  },
  methods: {
    // 点击删除
    clickDelete(type) {
      if (type == '←') {
        this.phoneNumber = this.phoneNumber.substr(
          0,
          this.phoneNumber.length - 1
        )
      } else if (type == 'C') {
        this.phoneNumber = ''
      }
      this.$refs.phoneNumber.focus()
    },
    // 点击拨号盘
    clickNumber(number) {
      window.handlePlayDialt('pause')
      this.number = number
      this.phoneNumber += number
      this.$refs.phoneNumber.focus()
    },
    // 关闭
    handleClose() {
      this.$emit('update:open', false)
    },
    clickEvent(e) {
      var box = this.$refs['dial-table']
      if (box && !box.contains(e.target)) {
        this.handleClose()
      }
    },
    //操作
    handleCall(type) {
      switch (type) {
        case 'audio':
          this.audioCall()
          break
        case 'trans':
          this.transCall()
          break
        case 'consult':
          this.consultCall()
          break
        case 'meeting':
          this.meetingCall()
          break
        default:
          break
      }
      this.$store.commit('callFlagEvent', true) // vuex缓存
      this.phoneNumber = ''
      this.$emit('update:open', false)
    },
    //语音呼叫
    audioCall() {
      if (this.phoneNumber == '') {
        this.$message.error(this.$t('m.tip.PLEASE_ENTER_NUMBER'))
        return
      }
      let makeCallForm = {
        callingDevice: this.operatorInfo.mainTel,
        calledDevice: this.phoneNumber,
        callType: 'audio',
        duplexMode: 'full',
      }
      SDK.makeCall(makeCallForm)
    },
    //转接
    transCall() {
      if (this.currentTalkObj.deviceTel == undefined) {
        this.$message.error(this.$t('m.tip.THERE_IS_NO_ONGOING_CALL'))
        return
      }
      let form = {
        activeDevice: this.currentTalkObj.deviceTel,
        calledDevice: this.phoneNumber,
      }
      SDK.singleTransferCall(form)
    },
    //咨询呼叫
    consultCall() {
      if (this.currentTalkObj.deviceTel == undefined) {
        this.$message.error(this.$t('m.tip.THERE_IS_NO_ONGOING_CALL'))
        return
      }
      let form = {
        callingDevice: this.operatorInfo.mainTel,
        activeDevice: this.currentTalkObj.deviceTel,
        calledDevice: this.phoneNumber,
        callType: 'audio',
      }
      SDK.consultCall(form)
    },
    //加入会议
    meetingCall() {
      if (this.phoneNumber == '') {
        this.$message.error(this.$t('m.tip.PLEASE_ENTER_NUMBER'))
        return
      }
      this.$emit('Call', this.phoneNumber, 'meeting')
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.phoneNumber.focus()
      document.addEventListener('click', this.clickEvent, true)
    })
  },
  destroyed() {
    document.removeEventListener('click', this.clickEvent, true)
  },
}
</script>

<style lang="scss" scoped>
.dial-plate {
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1000;
  .dial-table {
    height: 56%;
    width: 50%;
    background-color: #6c6c6c;
    top: 15%;
    position: absolute;
    right: 30%;
    background-color: #6c6c6c;
    tr {
      height: 20%;
      width: 100%;
      // line-height: 100%;
    }
    td {
      width: 25%;
    }
    .el-button {
      height: 100%;
      width: 100%;
      background-color: #a9a9a9;
      // box-shadow: 0 5px 0 #8f8f8f inset;
      box-shadow: 0 0px 10px #8f8f8f inset;
      font-size: 40px;
      border-radius: 8px;
    }

    /deep/.el-input {
      width: 100%;
      height: 100%;
      &__inner {
        width: 100%;
        height: 100%;
        padding-left: 3px;
        background-color: #000;
        color: #fff;
        font-size: 40px;
        font-weight: 400;
      }
    }
  }
}
</style>